<template>
	<view class="profile-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="navbar-title">个人资料</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 个人卡片 -->
			<view class="profile-card">
				<!-- 头像区域 -->
				<view class="avatar-section">
					<view class="avatar-wrapper">
						<image :src="userInfo.avatar" class="avatar-image" mode="aspectFill"></image>
					</view>
					<view class="avatar-info">
						<text class="avatar-label">个人头像</text>
					</view>
				</view>
				
				<!-- 分割线 -->
				<view class="divider"></view>
				
				<!-- 个性签名区域 -->
				<view class="signature-section">
					<view class="section-header">
						<view class="header-icon">
							<text class="icon-emoji">✨</text>
						</view>
						<view class="header-content">
							<text class="section-title">个性签名</text>
							<text class="section-desc">写下你的个性标语</text>
						</view>
					</view>
					
					<view class="input-wrapper">
						<textarea 
							v-model="userInfo.signature" 
							class="signature-input" 
							placeholder="还没有个性签名，快来写下你的想法吧~"
							auto-height
							:maxlength="200"
							@input="handleSignatureInput"
						></textarea>
						<view class="char-counter">
							<text class="count-text">{{ signatureLength }}/200</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 操作按钮区域 -->
			<view class="action-section">
				<view class="save-button" @click="saveProfile">
					<view class="button-content">
						<text class="button-icon">💾</text>
						<text class="button-text">保存资料</text>
					</view>
					<view class="button-shine"></view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				signature: ''
			}
		}
	},
	computed: {
		signatureLength() {
			return this.userInfo.signature ? this.userInfo.signature.length : 0
		}
	},
	onLoad() {
		this.loadUserInfo()
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1,
				animationType: 'slide-out-right',
				animationDuration: 300
			})
		},
		
		loadUserInfo() {
			const currentUser = storage.getCurrentUser()
			if (currentUser) {
				this.userInfo = {
					avatar: currentUser.avatar || '/static/images/logo.png',
					signature: currentUser.signature || ''
				}
			}
		},
		

		
		handleSignatureInput(e) {
			this.userInfo.signature = e.detail.value
		},
		
		saveProfile() {
			// 添加保存动画效果
			const currentUser = storage.getCurrentUser()
			if (currentUser) {
				const updatedUser = {
					...currentUser,
					avatar: this.userInfo.avatar,
					signature: this.userInfo.signature
				}
				
				storage.updateUser(updatedUser)
				
				// 震动反馈
				uni.vibrateShort()
				
				// 成功提示
				uni.showToast({
					title: '保存成功！',
					icon: 'success',
					duration: 2000
				})
				
				// 延迟返回
				setTimeout(() => {
					this.goBack()
				}, 1500)
			} else {
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'error'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	background: #f8f9fa;
	overflow: hidden;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 10;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.content-section {
	position: relative;
	z-index: 1;
	padding: 60rpx 30rpx 40rpx;
	min-height: calc(100vh - 200rpx);
}

.profile-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 40rpx;
	padding: 60rpx 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40rpx;
}

.avatar-wrapper {
	position: relative;
	margin-bottom: 20rpx;
}

.avatar-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
	border: 6rpx solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}



.avatar-info {
	text-align: center;
}

.avatar-label {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.avatar-desc {
	display: block;
	font-size: 24rpx;
	color: #666;
	opacity: 0.8;
}

.divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent 0%, #e0e0e0 50%, transparent 100%);
	margin: 40rpx 0;
}

.signature-section {
	
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.header-icon {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(255, 234, 167, 0.4);
}

.icon-emoji {
	font-size: 32rpx;
}

.header-content {
	flex: 1;
}

.section-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 6rpx;
}

.section-desc {
	display: block;
	font-size: 24rpx;
	color: #666;
	opacity: 0.8;
}

.input-wrapper {
	position: relative;
	background: rgba(248, 249, 250, 0.8);
	border-radius: 24rpx;
	border: 2rpx solid rgba(230, 230, 230, 0.5);
	transition: all 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #667eea;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 8rpx rgba(102, 126, 234, 0.1);
}

.signature-input {
	width: 100%;
	min-height: 200rpx;
	padding: 30rpx;
	font-size: 28rpx;
	line-height: 1.6;
	color: #333;
	background: transparent;
	border: none;
	resize: none;
}

.signature-input::placeholder {
	color: #999;
	font-size: 26rpx;
}

.char-counter {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	border: 1rpx solid rgba(200, 200, 200, 0.3);
}

.count-text {
	font-size: 22rpx;
	color: #666;
}

.action-section {
	display: flex;
	justify-content: center;
}

.save-button {
	position: relative;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16rpx 40rpx rgba(102, 126, 234, 0.3);
	overflow: hidden;
	transition: all 0.3s ease;
}

.save-button:active {
	transform: translateY(-4rpx);
	box-shadow: 0 20rpx 50rpx rgba(102, 126, 234, 0.4);
}

.button-content {
	display: flex;
	align-items: center;
	z-index: 2;
}

.button-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.button-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
}

.button-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.6s ease;
}

.save-button:active .button-shine {
	left: 100%;
}


</style> 